import { Tabs, TabsProps } from "antd"
import React, { useState } from "react"

interface TabItem {
	key: string
	label: string
	content?: React.ReactNode
}

interface CommonTabsProps extends TabsProps {
	tabItems: TabItem[]
	defaultActiveKey: string
	onChange?: (key: string) => void
}

const CommonTabs: React.FC<CommonTabsProps> = ({ tabItems, defaultActiveKey, onChange, ...restProps }) => {
	const [activeKey, setActiveKey] = useState<string>(defaultActiveKey)
	const items = tabItems || []

	const handleChange = (key: string) => {
		setActiveKey(key)
		if (onChange) {
			onChange(key)
		}
	}

	return <Tabs activeKey={activeKey} onChange={handleChange} items={items} {...restProps} />
}

export default CommonTabs
